import './buildingbasic.scss'
import React, { useState, Suspense, useEffect } from 'react';
import { Form, Input, Upload } from 'antd'
import store from '../../../../store/index'
// 地图组件

const BuildingMap = React.lazy(() => import('../../BuildingMap/BuildingMap'));
const BuildingBasic = () => {
    useEffect(() => {
        form.setFieldsValue(store.zhangxi.buildingDetails)
    }, [])
    // 上传图片
    const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }

        return e && e.fileList;
    };
    // 
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async file => {
        let src = file.url;
        if (!src) {
            src = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };

    // 表单
    const [form] = Form.useForm();


    // 文本框
    const { TextArea } = Input;
    return (
        <div className='buildingSpaceBasic_box'>
            {/* 表单 */}
            <div className='biao'>
                {/* 上 */}
                <div style={{ display: "flex" }}>
                    {/* 左边文字 */}
                    <div className='buildingSpaceBasic_biao_left'>
                        <h2>楼宇信息</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='buildingSpaceBasic_biao_right'>
                        {/* 左边表单 */}
                        <div className='buildingSpaceBasic_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 楼宇名称 */}
                                <Form.Item
                                    label="楼宇名称"
                                    name="tenName"
                                    rules={[{ required: true, message: '请输入楼宇名称!' }]}
                                >
                                    <Input placeholder="请输入楼宇名称" />
                                </Form.Item>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 物业费 */}
                                    <Form.Item
                                        label="物业费用"
                                        name="tenMoney"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入物业费用!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入楼宇名称" />
                                    </Form.Item>

                                    {/* 排序序号 */}
                                    <Form.Item
                                        label="排序序号"
                                        name="tenId"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入排序序号!' }]}
                                        style={{
                                            flex: '1',
                                        }}

                                    >
                                        <Input placeholder="请输入排序号" />
                                    </Form.Item>
                                </div>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 建筑面积 */}
                                    <Form.Item
                                        label="建筑面积"
                                        name="tenAllarea"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入建筑面积!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入建筑面积" />
                                    </Form.Item>
                                    {/* 在管面积 */}
                                    <Form.Item
                                        label="在管面积"
                                        name="tenRealarea"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true, message: '请输入在管面积!' }]}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <Input placeholder="请输入在管面积" />
                                    </Form.Item>
                                </div>

                                <div style={{
                                    display: "flex"
                                }}>
                                    {/* 楼宇描述 */}
                                    <Form.Item
                                        label="楼宇描述"
                                        name="tenDescribe"
                                        labelCol={{ span: 6 }}
                                        style={{
                                            flex: '1',
                                        }}
                                    >
                                        <TextArea rows={4} placeholder="请输入楼宇描述" />
                                    </Form.Item>
                                    {/* 在管面积 */}

                                    <Form.Item label="楼宇图片"
                                        name="tenPhoto"
                                        labelCol={{ span: 6 }}
                                        rules={[{ required: true }]}
                                        style={{
                                            flex: '1',
                                        }}>
                                        <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                                            <Upload
                                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                                listType="picture-card"
                                                fileList={fileList}
                                                onChange={onChange}
                                                onPreview={onPreview}
                                                maxCount={1}
                                            >
                                                {fileList.length < 5 && '+ 选择图片'}
                                            </Upload>

                                        </Form.Item>
                                    </Form.Item>
                                </div>

                            </Form>
                        </div>
                        {/* 右边地图 */}
                        <div className='buildingSpaceBasic_biao_childright'>
                            <Suspense fallback={<div>Loading...</div>}>
                                <BuildingMap tenWher={store.zhangxi.buildingDetails.tenWher} />
                            </Suspense>

                        </div>
                    </div>
                </div>

                {/* 下 */}
                <div style={{ display: "flex", marginTop: "25px" }}>
                    {/* 左边文字 */}
                    <div className='buildingSpaceBasic_biao_left'>
                        <h2 style={{ lineHeight: "40px" }}>楼宇信息</h2>
                    </div>
                    {/* 右边内容 */}
                    <div className='buildingSpaceBasic_biao_right' style={{ padding: "1.5% 1%" }}>
                        {/* 左边表单 */}
                        <div className='buildingSpaceBasic_biao_childleft'>
                            <Form
                                name="basic"
                                labelCol={{ span: 3 }}
                                wrapperCol={{ span: 22 }}
                                initialValues={{ remember: true }}
                                autoComplete="off"
                                form={form}
                            >
                                {/* 楼宇层高 */}
                                <Form.Item
                                    label="楼层层高"
                                    name="tenAllnum"
                                    rules={[{ required: true, message: '请输入楼层层高!' }]}
                                >
                                    <Input placeholder="请输入楼层层高" />
                                </Form.Item>

                                {/* 地上楼层 */}
                                <div style={{ display: " flex" }}>
                                    <Form.Item
                                        labelCol={{ span: 6 }}
                                        label="地上楼层"
                                        name="tenOvernum"
                                        rules={[{ required: true, message: '请输入层数!' }]}
                                        style={{ flex: 1, marginRight: 10 }}
                                    >
                                        <Input placeholder="请输入楼层层数" />
                                    </Form.Item>

                                    <Form.Item
                                        rules={[{ required: true, message: '请输入面积!' }]}
                                        name="tenOverarea"
                                        style={{ flex: 1 }}
                                    >
                                        <Input placeholder="请输入楼层面积m²" />
                                    </Form.Item>
                                    <span style={{ marginLeft: "-20px", fontSize: 16 }}>m²</span>
                                </div>

                                {/* 地下楼层 */}

                                <div style={{ display: " flex" }}>
                                    <Form.Item
                                        labelCol={{ span: 6 }}
                                        label="地下楼层"
                                        name="tenUndernum"
                                        rules={[{ required: true, message: '请输入层数!' }]}
                                        style={{ flex: 1, marginRight: 10 }}
                                    >
                                        <Input placeholder="请输入楼层层数" />
                                    </Form.Item>

                                    <Form.Item
                                        rules={[{ required: true, message: '请输入面积!' }]}
                                        name="tenUnderarea"
                                        style={{ flex: 1 }}
                                    >
                                        <Input placeholder="请输入楼层面积m²" />
                                    </Form.Item>
                                    <span style={{ marginLeft: "-20px", fontSize: 16 }}>m²</span>
                                </div>

                            </Form>

                        </div>
                        {/* 右边地图 */}
                        <div className='buildingSpaceBasic_biao_childright'>


                        </div>
                    </div>
                </div>




            </div>
        </div>
    )
}

export default BuildingBasic